<template>
  <div class="pd-20">
    <el-button type="info"
               @click="goBack">返 回</el-button>
    <el-button type="primary"
               @click="handleOption(null, 'add')">新 增</el-button>
    <element-table :columns="columns"
                   class="mt-20"
                   :data="tableData"
                   v-loading="loading"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="pageIndex"
                   :pageSize="pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:edit="{row}">
        <el-button type="primary"
                   @click="handleOption(row, 'edit')">编 辑</el-button>
        <el-button type="danger"
                   @click="handleOption(row, 'del')">删 除</el-button>
      </template>
    </element-table>
    <material-dialog :dataObj="dataObj"
                     v-if="isShow"
                     :visible.sync="isShow">
    </material-dialog>
  </div>
</template>
<script>
  import elementTable from '@/base/ElementTable'
  import materialDialog from './materialDialog'
  export default {
    name: 'material', // 素材管理
    data () {
      return {
        loading: false,
        isShow: false,
        columns: [
          {
            label: '素材名称',
            prop: 'name',
          },
          {
            label: '是否上传png',
            prop: 'isPngLog',
          },
          {
            label: 'png图片名称',
            prop: 'pngName',
          },
          {
            label: '是否上传psd',
            prop: 'isPdf',
          },
          {
            label: 'psd名称',
            prop: 'pdfName',
          },
          {
            label: '创建时间',
            prop: 'createTime',
            width: 200,
            formatter: (row, cellValue) => {
              return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm:ss')
            }
          },
          {
            label: '操作',
            prop: 'edit',
            width: 200,
            isSlot: true
          }
        ],
        tableData: [],
        pageTotal: 0,
        pageIndex: 1,
        pageSize: 20,
        dataObj: {},
        params: JSON.parse(this.$route.query.routeParams)
      }
    },
    methods: {
      goBack () {
        this.$router.go(-1); // 返回上一层
      },
      getList () {
        this.post(this.api.promote.sourceMaterialList, {
          pageIndex: this.pageIndex - 1,
          pageSize: this.pageSize,
          id: this.params.id
        }).then(res => {
          if (res.data.code === '200') {
            let resData = res.data.object;
            this.tableData = resData;
            this.tableData.forEach(item => {
              item.pdfUrl === '' ? item['isPdf'] = '否' : item['isPdf'] = '是';
              item.pngLogUrl === '' ? item['isPngLog'] = '否' : item['isPngLog'] = '是';
            });
            this.pageTotal = resData.length;
          }
        })
      },
      handleOption (row, op) {
        switch (op) {
          case 'add':
            this.dataObj = null;
            this.isShow = true;
            break;
          case 'edit':
            this.dataObj = Object.assign({}, row);
            this.isShow = true;
            break;
          case 'del':
            this.$confirm('您是否要删除该素材？')
              .then(async _ => {
                const { data: res } = await this.post(this.api.promote.delSourceMaterial, {
                  id: row.id,
                  themeId: this.params.id
                })
                if (res.code === '200') {
                  this.$message.success('删除成功!')
                  this.getList();
                }
                // 
              })
              .catch(_ => { });
            break;

        }
      },
      // 分页
      handleChangePage (page) {
        this.pageIndex = page;
        this.getList();
      },
    },
    created () {
      this.getList();
      console.log(this.params)
    },
    components: {
      'element-table': elementTable,
      'material-dialog': materialDialog
    }
  }
</script>
<style scoped lang="scss">
</style>